<template>
  <div class="directory-container">
    <!-- 条件搜索 -->
    <el-row class="directory-search" type="flex" justify="space-between" >
      <!-- 搜索功能 -->
      <el-row type="flex" :gutter="10">
        <el-col>
          <el-input size="small" style="width:215px" v-model="queryData.directory_name" placeholder="目录名称"></el-input>
        </el-col>
        <el-col>
          <el-select size="small" style="width:215px" v-model="queryData.subject_id" placeholder="归属学科" @visible-change="getSubListData">
            <el-option 
            v-for="item in subjectList" :key="item.id" 
            :label="item.name" :value="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col>
          <el-select size="small" style="width:215px" v-model="queryData.is_show" placeholder="显示状态">
            <el-option label="显示" value="1"></el-option>
            <el-option label="隐藏" value="2"></el-option>
          </el-select>
        </el-col>
        <el-col>
          <el-button type="primary" size="small" plain @click="getDirectoryData">搜索</el-button>
          <el-button size="small" @click="onReset">重置</el-button>
        </el-col>
      </el-row>
      <!-- 创建学科 -->
      <el-button type="primary" plain @click="addDir">创建目录</el-button>
    </el-row>
    <!-- 目录列表信息 -->
    <el-table
      :data="directoryList"
      border
      style="width: 100%"
      :header-cell-style="{background:'#fafafa', color:'#646464'}"
    >
      <el-table-column
        type="index"
        label="序号"
        width="120px"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="id"
        label="目录ID"
        width="70px"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="directory_name"
        label="目录名称"
      >
      </el-table-column>
      <el-table-column
        label="学科图标"
        align="center"
      >
        <template slot-scope="{row}">
          <span v-if="!row.directory_icon">暂无</span>
          <img :src="`http://122.51.249.55:7005/${row.directory_icon}`" style="height:40px" v-else>
        </template>
      </el-table-column>
      <el-table-column
        prop="subject_name"
        label="归属学科"
      >
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建人"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="是否显示"
        align="center"
      >
        <template slot-scope="{row}">
          <el-switch 
            :value="row.is_show === 1"
            @change="changeSwitch(row)"
            active-text="是"
            inactive-text="否"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="标签数量"
        align="center"
      >
        <template slot-scope="{row}">
          <el-link type="primary" v-if="row.tag_num !== 0"
            @click="linkFn(row.id)">
            {{row.tag_num}} <i class="el-icon-link"></i> 
          </el-link>
          <el-link type="info" v-else>{{row.tag_num}}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="{row}">
          <el-button size="small" type="primary" icon="el-icon-edit" circle 
          @click="editDir(row.id)"></el-button>
          <el-button size="small" type="danger" icon="el-icon-delete" circle
          @click="delDir(row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="pagination">
      <el-pagination
        background
        :current-page="queryData.page"
        @size-change="SizeChange"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryData.total"
        @current-change="changePage"
        >
      </el-pagination>
    </div>
    <!-- 新增/修改弹层 -->
    <add-directory
      ref="addDialog"
      @update="getDirectoryData"
      :subjectList="subjectList"
    />
  </div>
</template>

<script>
import {getDirectoryList , getSubList , delDirectory , editDirectory } from '@/api/subject'
import AddDirectory from './components/add-directory.vue'
export default {
  name:'directoryIndex',
  components:{
    AddDirectory
  },
  data () {
    return {
      queryData:{
        page: 1,
        limit: 10,
        total:0,
        directory_name:'',
        subject_id:'',
        is_show:''
      },
      directoryList:[],  //  目录信息列表
      subjectList:[],  //  学科列表
      // showDialog:true  //  弹层显示
    }
  },
  created () {
    this.getSubFn()
    this.getDirectoryData()
    this.getSubListData()
  },
  methods: {
    //  获取所属学科
    getSubFn(){
      this.queryData.subject_id = this.$route.query.subject_id
    },
    //  获取目录信息列表
    async getDirectoryData(){
      const {list,total} = await getDirectoryList(this.queryData)
      this.queryData.total = total
      this.directoryList = list
      // console.log(list);
    },
    //  获取学科列表
    async getSubListData(){
      this.subjectList = await getSubList()
    },
    changePage(newPage) {
      this.queryData.page = newPage
      this.getDirectoryData()
    },
    SizeChange(val){
      this.queryData.limit = val
      this.getDirectoryData()
    },
    //  重置搜索
    onReset(){
      this.queryData.directory_name = ''
      this.queryData.subject_id = ''
      this.queryData.is_show = ''
      this.getDirectoryData()
    },
    //  修改显示状态
    async changeSwitch(row){
      await editDirectory({id:row.id,is_show:row.is_show === 1 ? 2 : 1})
      this.$message.success('修改成功')
      this.getDirectoryData()
    },
    //  新增目录
    addDir(){
      this.getSubListData()
      this.$refs.addDialog.showDialog = true
    },
    //  修改目录
    async editDir(id){
      this.getSubListData()
      await this.$refs.addDialog.getDirectory(id)
      this.$refs.addDialog.showDialog = true
    },
    //  删除目录
    async delDir(id){
      await this.$confirm('确认删除吗')
      await delDirectory(id)
      this.$message.success('删除成功')
      this.getDirectoryData()
    },
    //  跳转至标签信息
    linkFn(id){
      this.$router.push({path:'tag',query:{directory_id:id}})
    }
  }
}
</script>

<style lang="scss" scoped>
.directory-container {
  padding: 16px;
  background-color: #fff;

  .directory-search {
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
  }

  .pagination {
    display: flex;
    justify-content: end;
    padding: 20px 5px;
  }
}
</style>